<template>
	<div class="box">
		<br>
		<Form ref="formInline" :model="formInline" :rules="ruleInline">
			<FormItem prop="user">
				<Input type="text" v-model="formInline.user" placeholder="Username" style="width: 400px;">
				<Icon type="ios-person-outline" slot="prepend"></Icon>
				</Input>
			</FormItem>
			<FormItem prop="password">
				<Input type="password" v-model="formInline.password" placeholder="Password" style="width: 400px;">
				<Icon type="ios-locked-outline" slot="prepend"></Icon>
				</Input>
			</FormItem>
			<FormItem>
				<Button type="primary" @click="handleSubmit('formInline')">登录</Button>
			</FormItem>
		</Form>
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				formInline: {
					user: '',
					password: ''
				},
				ruleInline: {
					user: [
						{ required: true, message: '请填写用户名', trigger: 'blur' }
					],
					password: [
						{ required: true, message: '请填写密码', trigger: 'blur' },
						{ type: 'string', min: 3, message: '密码长度不能小于6位', trigger: 'blur' }
					]
				}
			}
		},
		computed: {
			...mapGetters(['login']),
		},
		methods: {
			...mapActions(['checkLogin']),
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.$http.get('http://localhost:3000/admin/data').then(res => {
							let ll = res.data.length
							for(let i = 0; i < ll; i++) {
								if(this.formInline.user == res.data[i].user && this.formInline.password == res.data[i].password){
									this.checkLogin(true)
								}else {
						this.$Message.error('用户名或密码错误!');
					}
							}
						})
					} else {
						this.$Message.error('表单验证失败!');
					}
				})
			}
		}
	}
</script>
<style scoped>
	.box {
		position: absolute;
		left: 100px;
		top: 100px;
		text-align: center;
	}
</style>